<template>
	<view class="root">
		<map
			id="map"
			:longitude="location.longitude"
			:latitude="location.latitude"
			:show-location="true"
			:enable-traffic="true"
			:enable-3D="true"
			:show-compass="true"
		/>

		<view v-if="status === 0" class="main-0">
			<text class="title">等待接单</text>
			<image
				class="icon-wait_car"
				src="/static/images/icon-wait_car.png"
			/>
			<text class="tips">当前排队较多，请多等几分钟</text>
			<text class="time">
				{{
					`${prefixZero(timing.minute)}:${prefixZero(timing.second)}`
				}}
			</text>
			<text class="describe">即将为您优先派单</text>

			<label @click="cancelOrder" class="cancelOrder">
				<image
					class="icon-cancel"
					src="/static/images/icon-cancel.png"
				/>
				<text>取消订单</text>
			</label>
		</view>

		<view v-if="status === 1" class="main-1">
			<text class="title">快车司机即将到达，请避开人群等待</text>
			<text class="describe">
				<text>请前往</text>
				<text class="point">{{ drivingInfo.address }}</text>
				<text>
					上车.若您在司机到达后3分钟上车，将会产生超时等候费。请带好口罩，安全出行
				</text>
			</text>

			<view class="drive-info">
				<view class="info-text">
					<text class="number-plate"
						>{{ drivingInfo.driver.numberPlate }}
					</text>
					<text class="car-type">
						{{ drivingInfo.driver.carType }}·{{
							drivingInfo.driver.color
						}}
					</text>
					<text class="driver">
						<text>{{ drivingInfo.driver.userName }}</text>
						<text>{{ drivingInfo.driver.gender }}</text>
						<text>{{ drivingInfo.driver.star }}分</text>
						<text>{{ drivingInfo.driver.orderCount }}单</text>
					</text>
				</view>

				<view class="info-pic">
					<image
						class="car"
						mode="aspectFill"
						:src="drivingInfo.driver.carImg"
					/>
					<image
						class="driver"
						mode="aspectFill"
						:src="drivingInfo.driver.avatarUrl"
					/>
				</view>
			</view>

			<view class="options">
				<view
					class="option"
					hover-class="tap-hover"
					hover-stay-time="100"
					@click="operation(option.icon)"
					v-for="option in options"
					:key="option.icon"
				>
					<image
						class="icon-option"
						:src="`/static/images/icon-${option.icon}.png`"
						mode="aspectFit"
					/>
					<text>{{ option.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { prefixZero, transformQueryString } from "@/libs/utils";
	import Vue from "vue";
	import Component from "vue-class-component";
	import { DrivingInfo } from "../common/api";

	let [flag, timers]: [boolean, number[]] = [false, []];

	@Component
	export default class InCity extends Vue {
		status: number = 0;
		order_id: number = 0;

		location: { longitude: number; latitude: number } = {
			longitude: 104.065901,
			latitude: 30.657372,
		};

		options = [
			{ icon: "sos", text: "110报警" },
			{ icon: "tel", text: "打电话" },
			{ icon: "cancel_black", text: "取消订单" },
		];

		drivingInfo: DrivingInfo = {
			address: "",
			driver: {
				numberPlate: "",
				carType: "",
				color: "",
				userName: "",
				gender: "",
				star: 0,
				orderCount: "",
				phoneNumber: "",
			},
		};

		timing: { minute: number; second: number } = {
			minute: 0,
			second: 0,
		};

		prefixZero = prefixZero;

		private onLoad({
			status,
			order_id,
		}: {
			status: string;
			order_id: string;
		}): void {
			status && (this.status = +status);
			order_id && (this.order_id = +order_id);

			uni.getLocation({
				success: (res) => (this.location = res),
			});
			+status && this.getDrivingInfo();
		}

		private onShow(): void {
			flag = false;
			this.getOrderStatus();
		}

		private onHide(): void {
			this.clearTimer();
		}

		private onUnload(): void {
			this.clearTimer();
		}

		public clearTimer(): void {
			flag = true;
			timers.forEach((timer) => clearTimeout(timer));
		}

		public cancelOrder(): void {
			this.request.get(`/api/cancelOrder?id=${this.order_id}`).then((res) =>
				uni.showToast({
					title: "本次行程已取消",
					success: () => setTimeout(uni.navigateBack, 1200),
				})
			);
		}

		public getOrderStatus(): void {
			const { status, request, getOrderStatus, order_id } = this;

			if (!status) {
				this.timing.second++;
				if (this.timing.second >= 60) {
					this.timing.second = 0;
					this.timing.minute++;
				}
			}

			request.get("/api/checkOrder").then(({ data }) => {
				if (flag) return;
				const statusPages: string[] = [
					"inCity?status=0",
					"inCity?status=1",
					"inCity?status=1",
					"travel?status=6",
				];

				const pageStatus = transformQueryString(statusPages[data.status])
					.status;

				if (+pageStatus === status) {
					timers.push(setTimeout(getOrderStatus, 1000));
					return;
				}

				uni.redirectTo({
					url: `${statusPages[+data.status]}&order_id=${data.order_id}`,
				});
			});
		}

		public getDrivingInfo(): void {
			this.request
				.get(`/api/cityWaitJieren?id=${this.order_id}`)
				.then(({ data }) => {
					this.drivingInfo = data;
				});
		}

		public operation(mode: string): void {
			switch (mode) {
				case "sos":
					uni.makePhoneCall({ phoneNumber: "110" });
					break;
				case "tel":
					uni.makePhoneCall({
						phoneNumber: this.drivingInfo.driver.phoneNumber,
					});
					break;
				case "cancel_black":
					uni.showModal({
						title: "提醒",
						cancelText: "再等等",
						confirmText: "立即取消",
						cancelColor: "#5487e5",
						confirmColor: "#666",
						content: "司机即将抵达, 是否确定要取消订单?",
						success: ({ confirm }) => {
							confirm && this.cancelOrder();
						},
					});
					break;
				default:
					uni.showToast({ title: "program abnormal" });
					return;
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>

<style lang="scss">
	.root {
		flex: 1;
		#map {
			flex: 1;
			width: 100%;
		}

		.main-0 {
			position: absolute;
			bottom: 0;
			left: 20rpx;
			right: 20rpx;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			.title {
				color: #1b1b1b;
				font-size: 32rpx;
				line-height: 100rpx;
			}
			.icon-wait_car {
				width: 215rpx;
				height: 225rpx;
			}
			.tips {
				color: #1b1b1b;
				font-size: 32rpx;
				margin-top: 44rpx;
			}
			.time {
				color: #1b1b1b;
				font-size: 58rpx;
				margin-top: 40rpx;
			}
			.describe {
				color: #999;
				font-size: 26rpx;
				margin-top: 22rpx;
			}
			.cancelOrder {
				margin: 80rpx 0;
				.icon-cancel {
					width: 21rpx;
					height: 21rpx;
					margin-right: 7rpx;
				}
				text {
					color: #999;
					font-size: 20rpx;
				}
			}
		}

		.main-1 {
			padding: 30rpx 50rpx 50rpx;
			border-radius: 30rpx 30rpx 0 0;
			.title {
				color: #1b1b1b;
				font-size: 32rpx;
				font-weight: 600;
			}
			.describe {
				color: #1b1b1b;
				font-size: 22rpx;
				margin-top: 14rpx;
				font-weight: 500;
				.point {
					color: #5487e5;
				}
			}
			.drive-info {
				margin-top: 60rpx;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.info-text {
					.number-plate {
						font-size: 58rpx;
						color: #1b1b1b;
						font-weight: 500;
					}
					.car-type {
						margin-top: 18rpx;
						color: #1b1b1b;
						font-size: 30rpx;
					}
					.driver {
						margin-top: 22rpx;
						color: #999;
						font-size: 22rpx;
						text {
							margin-right: 0.6em;
						}
					}
				}
				.info-pic {
					width: 250rpx;
					height: 150rpx;
					background-color: #ddd;
					border-radius: 20rpx;
					overflow: hidden;
					position: relative;
					.car {
						width: 100%;
						height: 100%;
					}
					.driver {
						position: absolute;
						right: 18rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
				}
			}

			.options {
				margin-top: 50rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.option {
					align-items: center;
					justify-content: center;
					.icon-option {
						width: 34rpx;
						height: 32rpx;
						margin-bottom: 16rpx;
					}
					text {
						color: #666;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>